<template>
	<view class="page-content">
		<u-alert type="error" :description="$t('password.page-tips')"></u-alert>
		<view class="form-warp m-md">
			<form @submit="edit">
				<view class="form-warp_item p-md radius-25" v-if="userInfo.is_password == 1">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="old_password" :placeholder="$t('password.edit-pass-placeholder')" class="input text-md"/>
						</view>
					</view>
				</view>
				
				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password" :placeholder="$t('password.edit-pass-new-placeholder')" class="input text-md"/>
						</view>
					</view>
				</view>

				<view class="form-warp_item p-md radius-25">
					<view class="flex-start flex-warp-nowarp">
						<view class="form-warp_item-label flex-center">
							<i-icon name="lock-line" color="#909193"></i-icon>
						</view>
						<view class="form-warp_item-inline">
							<input type="password" name="password_confirm" :placeholder="$t('retrieve_pass.password-confirm-placeholder')" class="input text-md"/>
						</view>
					</view>
				</view>
				<view class="form-warp_btns m-t-md">
					<u-button formType="submit" size="large" class="form-warp_btns-btn" shape="circle" :text="$t('password.edit-btn')" :color="configInfo.mainColor" :style="{'color':configInfo.btnColor,'font-size':'25px'}" :loading="sumbitLoading" loadingText=" " :disabled="sumbitLoading"></u-button>
				</view>
				<!-- <view class="u-submit">
					<button form-type="submit" class="btn btn-main">{{$t('password.edit-btn')}}</button>
					<button form-type="reset" ref="resrtBtn" style="display:none;">Reset</button>
				</view> -->
			</form>
		</view>
		<side-tools :scrollTop="scrollTop"></side-tools>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		data() {
			return {
				sumbitLoading:false,
				scrollTop:0
			}
		},
		computed: mapState({
			userInfo: state => state.user.userInfo,
			configInfo: state => state.config.configInfo,
		}),
		onLoad(){
		},
		onReady(){
			if(this.$wechat.isWechat()) this.$util.navTitle()
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods: {
			...mapActions(['getUserInfo']),
			
			edit:async function(e){
				this.sumbitLoading = true
				let data = e.mp.detail.value
				let res = await this.$api.user.editUserPass(data)
				if(res.code == 200){
					let thos = this
					this.$util.showToast(res.msg,function(){
						thos.getUserInfo()
						thos.$util.goNavigateBack()
					})
				}
				this.sumbitLoading = false
				// const _this = this;
				// uni.showLoading({title:$t('app.editing"')});
				// const data=e.mp.detail.value;
				// const res = await User.postEditPass(data);
				// if(res.code == 200){
				// 	_this.$util.showToast(res.msg,function(){
				// 		_this.$refs.resrtBtn.$dispatch('Form', 'uni-form-reset', {
				// 			type: 'reset'
				// 		});
				// 	});
				// }
			},
		}
	}
</script>

<style lang="scss">
	page{
		background-color: var(--theme-page-bg);
	}
	.form-warp{
		&_item{
			margin-top: 40rpx!important;
			background-color: #fff;
		}
		&_btns{
			margin-top:40rpx!important;
		}
		&_btns-btn{
			font-size: 13px!important;
		}
	}
</style>
